<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取成绩</title>
    <style>
        #show{
            width: 100px;
            font-weight: bold;
            font-size: 15em;
            display: flex;
            align-content: center;
            align-items: center;
            margin: 400px auto;
        }
        #show1{
            width: 500px;
            font-weight: bold;
            font-size: 3em;
            display: flex;
            align-content: center;
            align-items: center;
            margin: 400px auto;
        }
    </style>
</head>
<body>
<script src="../js/promiseAjax.js"></script>
<h1 id="show"></h1>
<script>
    //后台获取用户成绩
    // async function user() {
    //     let url = 'http://localhost/basicjs/promise/php';
    //     let user = await Ajax(`${url}/user.php?name=向军`);
    //     let lessons = await Ajax(`${url}/houdunren.php?id=${user.id}`);
    //     console.log(lessons);
    // }
    // user();


    //也可以将操作放在立即执行函数中完成
    // (async function user() {
    //     let url = 'http://localhost/basicjs/promise/php';
    //     let user = await Ajax(`${url}/user.php?name=后盾人`);
    //     let lessons = await Ajax(`${url}/houdunren.php?id=${user.id}`);
    //     console.log(lessons);
    // })();

    //下面是使用async设置定时器,并间隔时间来输出内容
    async function sleep(ms = 2000) {
        return new Promise(resolve => {
            setTimeout(resolve,ms);
        });
    }

    async function run() {
        // for(const value of ["后盾人","向军"]){
        //     await sleep();
        //     console.log(value);
        // }
        let color_arr = [
            '#fc5c65','#fd9644','#fed330','#26de81','#2bcbba'
            ,'#eb3b5a','#fa8231','#f7b731','#20bf6b','#0fb9b1'
            ,'#45aaf2','#4b7bec','#a55eea','#d1d8e0','#778ca3'
            ,'#2d98da','#8854d0','#a5b1c2','#4b6584','#FD7272'
        ];
        for (let i = 20 ; i >= 0;i--){
            await sleep(500);
            console.log(i);
            document.getElementById('show').innerHTML = i;
            document.getElementById('show').style.color = color_arr[i];
        }

        let h1 = document.createElement('h1');
        let txt = document.createTextNode('结束了,下班！');
        h1.setAttribute('id','show1');
        h1.appendChild(txt);
        document.body.innerHTML = '';
        document.body.appendChild(h1);
        document.body.style.backgroundColor = '#eb3b5a';

    }

    run();
</script>
</body>
</html>